<template>
<div>
    <div class="header">
      <div class="header-left">
          <h2>{{shopcar}}</h2>
          <h3 @click="fun3()">{{often}}</h3>
      </div>
      <div class="header-right">
          <div class="header-right-left">{{togother}}</div>
          <span @click="del()">{{deletea}}</span>
      </div>
  </div>
<div class="main">
    <div class="main-1">
      <div class="main-top1">
          <div class="main-top1-left">
              <input type="checkbox" @click="fun1()" :checked="zongcheck" class="input1">
              <span><img :src='img' alt="#"></span>
              <h3>{{title1}}</h3>
          </div>
          <div class="main-top1-right">
              <h4>{{title2}}</h4> 
          </div>          
      </div>
      <div class="main-top2">
          <h2>{{title3}}</h2>
          <span>{{title4}}</span>
      </div>
      <div class="main-top3">
          <div class="main-top3-left">
              <h2>{{title5}}</h2>
              <span>{{title6}}</span>
          </div>
          <div class="main-top3-right">
              <h1>{{title7}}</h1>
          </div>
      </div>
      <div class="main-top4">
          <div class="main-top4-top">
                <div class="main-top4-top-left">
                    <h2>{{title8}}</h2>
                    <span>{{title9}}</span>
                </div>
                <div class="main-top4-top-right">
                    <h1>{{title10}}</h1>
                 </div>
          </div>
          <div class="main-top4-bottom">
              <ul v-if="arr.length!=0">
                   <!-- v-for="(v,i) in this.$store.state.a.arr" 模拟后端mock -->
                  <li v-for="(v,i) in arr" :key="i">
                      <div class="marquee"><input type="checkbox" :checked="v.check" class="input"></div>
                      <span class="commodityImages"><img :src="v.img" alt="#"></span>
                      <div class="commodityContent"  @click="fun4()">
                          <h1>{{v.title11}}</h1>
                          <span>{{v.title12}}</span>
                          <div class="pirce"><span>{{v.title13}}</span>{{v.title14}}</div>
                      </div>
                      <div class="calculate"><button value="-" @click="v.title16>1?v.title16--:''">{{v.title15}}</button><span>{{v.title16}}</span><button value="+" @click="v.title16++">{{v.title17}}</button></div>
                  </li>
              </ul>
              <p v-else>暂无数据哦^_^!</p>
          </div>
      </div>
      
</div> 
 <Footer @xiaoming="fun"/>
</div>
</div>

</template>

<script>
import Footer from "com/shop/footer.vue"
export default {
    components: {
        Footer
        // Footer
    },
    mounted(){
        // console.log( this.$store.state.a.totalmoney)
        this.arr.map((v)=>{
            console.log(v.check)
        })
        // 单选价格
        let oInput = document.querySelectorAll(".input")
        for(let i = 0;i<oInput.length;i++){
            let that = this;
            console.log(oInput[i].checked)
        oInput[i].onchange=function(){
             let oGoodsPrice = oInput[i].parentNode.nextElementSibling.nextElementSibling.lastElementChild.firstElementChild.innerHTML
            console.log(oGoodsPrice)
                if(oInput[i].checked == false){
                    that.$store.commit("reduce",{num:oGoodsPrice})
                }else{
                    that.$store.commit("add",{num:oGoodsPrice})
                }
            }
        }
        // 全选价格
        let oInput1 = document.querySelector(".input1")
        console.log(oInput1.checked)
        let that = this;
             oInput1.onchange=function(){
                 for(let i = 0;i<oInput.length;i++){
                 let oGoodsPrice = oInput[i].parentNode.nextElementSibling.nextElementSibling.lastElementChild.firstElementChild.innerHTML
                console.log(oGoodsPrice)
                if(oInput1.checked == true){
                    that.$store.commit("totalgoods",{num:oGoodsPrice})
                }else{
                    that.$store.commit("nogoods")
                }
            }
        }
        // 使用vuex发送异步请求----->dispatch()触发actions发送异步
        this.$store.dispatch("axiosshop",{url:"/shop/haozi"})
    },
    data(){
        return{
            shopcar:"购物车",
            often:"我常买",
            togother:"一起购",
            deletea:"删除",
            zongcheck2:false,
            zongcheck:false,
            img:"image/Shop/1.png",
            title1:"盒马鲜生",
            title2:"优惠券",
            title3:"运费",
            title4:"已满39免运费",
            title5:"全部换购",
            title6:"已满68元,享超值换购",
            title7:"去换购>",
            title8:"换购",
            title9:"已满1件,享超值换购",
            title10:"去换购>",
            arr:[
                {id:1,check:false,img:"image/Shop/4.png",title11:"DOLE金菠萝切片(7#1只/份)",title12:"最快10：15送达",title13:"23.9",title14:"/盒",title15:"-",title16:1,title17:"+"},
                {id:2,check:false,img:"image/Shop/4.png",title11:"东北杨梅450g(盒马日日新)",title12:"最快10：15送达",title13:"26.9",title14:"/盒",title15:"-",title16:1,title17:"+"},
                {id:3,check:false,img:"image/Shop/4.png",title11:"枝纯蓝莓125g(14mm+)",title12:"最快10：15送达",title13:"9.9",title14:"/盒",title15:"-",title16:1,title17:"+"},
                {id:4,check:false,img:"image/Shop/4.png",title11:"【烧烤】铁板大鱿鱼(国产)",title12:"最快10：15送达",title13:"15.8",title14:"/盒",title15:"-",title16:1,title17:"+"},
            ]
        }
    },
    methods:{
        // 点击上面的全选按钮
        fun1(){
            // console.log(this.zongcheck)
            // console.log(this.$store)
            this.$store.commit("sta")
            this.zongcheck = !this.zongcheck
            this.arr.map((v)=>{
             return v.check = this.zongcheck
            })
        },
        // 点击下面全选按钮
        fun(flag){
            console.log(flag)
            this.arr.map((v)=>{
               return v.check=flag
            })
            let oInput = document.querySelectorAll(".input")
            for(let i = 0; i < oInput.length; i++){
                console.log(oInput[i].checked)
                let oGoodsPrice = oInput[i].parentNode.nextElementSibling.nextElementSibling.lastElementChild.firstElementChild.innerHTML
                console.log(oGoodsPrice)
                if(flag == true){
                    this.$store.commit("totalgoods",{num:oGoodsPrice})
                }else{
                    this.$store.commit("nogoods")
                }
            }
        },
        //头部页面的跳转
        fun3(){
        this.$router.push("/erz")
        },
        // 删除
        del(){
            this.arr = [];
        },
        //跳转到详情页
        fun4(){
        this.$router.push("/ery")
        }
    },
}
</script>

<style scoped>
     .header{
        width: 100%;
        height: 0.68rem;
        background-color:#f3f3f3;
        display: flex;
        justify-content: space-between;
        /* align-items: center; */
        /* padding-top: 0.18rem; */
    }
    .header-left{
        width: 1.31rem;
        height: 0.68rem;
        background-color: #f3f3f3;
        display: flex;
        justify-content: space-between;
        margin-left: 0.13rem;
        margin-top: 0.18rem;
    }
    .header-left>h2{
        border-bottom: 2px solid #429eb7;
        font-size: 0.17rem;
        margin-top: 0.02rem;
        /* font-weight: 400; */
        width: 0.53rem;
        height: 0.28rem;
        color: #429eb7;
    }
    .header-left>h3{
        font-size: 0.15rem;
        margin-top: 0.02rem;
        /* font-weight: 400; */
        width: 0.45rem;
        height: 0.24rem;
        color: black;
        display: block;
    }
    .header-left-on{
        font-size: 0.1rem;
    }
    .header-right{
        width: 1.085rem;
        height: 0.68rem;
        background-color: #f3f3f3;
        display: flex;
        justify-content: space-between;
        margin-top: 0.18rem;
        margin-right: 0.13rem;
    }
    .header-right-left{
        width: 0.68rem;
        height: 0.24rem;
        background-color: #15a6e5;
        text-align: center;
        line-height: 0.24rem;
        font-size: 0.12rem;
        color: white;
        border-radius: 15px;
    }
    .header-right>span{
        font-size: 0.12rem;
        margin-top: 0.04rem;
        margin-right: 0.05rem;
    }
/* main */
    .main{
        width: 100%;
        background-color:#f2f2f2;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        /* border-radius: 10px; */
    }
/* main-top1 */
    .main-1{
        width: 3.895rem;
        height: 5.405rem;
        background-color: #ffffff;
        border-radius: 10px;
    }
    .main-top1{
        width: 3.895rem;
        height: 0.48rem;
        border-bottom:1px solid gray;
        display: flex;
        justify-content: space-between;
    }
    .main-top1-left{
        width: 1.31rem;
        height: 0.48rem;
        background-color:#ffffff;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-bottom:1px solid gray;
    }
    .main-top1-left>input{
        /* border-radius: 50%; */
        display: block;
        margin-right: 0.1rem;
        width: 0.16rem;
        height: 0.16rem;
    }
    .main-top1-left>span{
        display: block;
        width: 0.185rem;
        height: 0.185rem;
        background-color:#ffffff;
        margin-right: 0.08rem;
    }
    .main-top1-left>span>img{
        width: 0.185rem;
        height: 0.185rem;
        display: block;
        /* margin-right: 0.03rem; */
    }
    .main-top1-left>h3{
        font-size: 0.14rem;
        font-weight: normal;
    }
    .main-top1-right{
        width: 0.55rem;
        height: 0.48rem;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        border-bottom:1px solid gray;
    }
    .main-top1-right>h4{
        font-size: 0.14rem;
        font-weight: normal;
    }
/* main-top2 */
    .main-top2{
        width: 3.895rem;
        height: 0.46rem;
        background-color:#ffffff;
        border-bottom: 1px solid gray;
        display: flex;
        align-items: center;
    }
    .main-top2>h2{
        font-size: 0.1rem;
        font-weight: normal;
        width: 0.27rem;
        height: 0.14rem;
        background-color: #28b1d3;
        text-align: center;
        line-height: 0.14rem;
        color: white;
        margin-left: 0.2rem;
    }
    .main-top2>span{
        font-size: 0.1rem;
        margin-left: 0.1rem;
        display: flex;
    }
/* main-top3 */
    .main-top3{
        width: 3.895rem;
        height: 0.48rem;
        background-color: #ffffff;
        border-bottom: 1px solid gray;
        display: flex;
        justify-content: space-between;
    }
    .main-top3-left{
        width: 1.91rem;
        height: 0.48rem;
        display: flex;
        align-items: center;
    }
    .main-top3-left>h2{
        font-size: 0.1rem;
        font-weight: normal;
        width: 0.5rem;
        height: 0.14rem;
        text-align: center;
        line-height: 0.14rem;
        color: white;
        background-color: #cc6346;
        margin-left: 0.2rem;
    }
     .main-top3-left>span{
        font-size: 0.1rem;
        margin-left: 0.1rem;
        display: flex;
    }
    .main-top3-right{
        width: 0.61rem;
        height: 0.48rem;
        background-color:#ffffff;
        line-height: 0.48rem;
        border-bottom: 1px solid gray;
    }
    .main-top3-right>h1{
        font-size: 0.1rem;
        font-weight: normal;
        color: #28b1d3;
        /* border-bottom: 1px solid gray; */
    }
/* main-top4 */
    .main-top4{
        width: 3.895rem;
    }
    .main-top4-top{
        width: 3.895rem;
        height: 0.6rem;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
    }
    .main-top4-top-left{
        width: 1.66rem;
        height: 0.6rem;
        display: flex;
        margin-top: 0.15rem;
    }
    .main-top4-top-left>h2{
        font-size: 0.1rem;
        font-weight: normal;
        width: 0.26rem;
        height: 0.14rem;
        text-align: center;
        line-height: 0.14rem;
        color: white;
        background-color: #cc6346;
        margin-left: 0.2rem;
    }
    .main-top4-top-left>span{
        font-size: 0.09rem;
        margin-left: 0.12rem;
        display: flex;
    }
    .main-top4-top-right{
        width: 0.61rem;
        height: 0.6rem;
        background-color:#ffffff;
        padding-top: 0.15rem;
    }
    .main-top4-top-right>h1{
        font-size: 0.1rem;
        font-weight: normal;
        color: #28b1d3;
    }
    .main-top4-bottom{
       width: 3.895rem;
    }
    .main-top4-bottom>ul>li{
        width: 3.895rem;
        height: 1.06rem;
        background-color: #ffffff;
        /* padding-bottom: 0.29rem; */
        display: flex;
        /* margin-bottom: .36rem; */
        justify-content: space-evenly;
    }
    .main-top4-bottom>ul>li>.marquee{
        width: 0.4rem;
        /* height: 0.71rem; */
        background-color:#ffffff;
        padding-left: 0.2rem;
        display: flex;
        margin-top: 0.21rem;
    }
    .main-top4-bottom>ul>li>.marquee input{
        display: block;
        width: 0.16rem;
        height: 0.16rem;
    }
    .main-top4-bottom>ul>li>.commodityImages{
        display: block;
        width: 0.71rem;
        height: 0.92rem;
        background-color: #ffffff;
    }
    .main-top4-bottom>ul>li>.commodityImages img{
        display: block;
        width: 0.71rem;
        height: 0.71rem;
    }
    .main-top4-bottom>ul>li>.commodityContent{
        width: 1.735rem;
        height: 1.06rem;
        background-color: #ffffff;
    }
    .main-top4-bottom>ul>li>.commodityContent h1{
        font-size: 0.12rem;
        font-weight: normal;
        margin-left: 0.1rem;
    }
    .main-top4-bottom>ul>li>.commodityContent>span{
        display: block;
        width: 0.745rem;
        height:0.13rem;
        font-size: 0.09rem;
        border: 1px solid gray;
        color: #28b1d3;
        text-align: center;
        line-height: 0.13rem;
        margin-left: 0.1rem;
        margin-top: 0.1rem;
        border-radius: 5px;
    }
     .main-top4-bottom>ul>li>.commodityContent .pirce{
         font-size: 0.09rem;
         margin-left: 0.1rem;
         color: gray;
         margin-top: 0.21rem;
         margin-left: 0.1rem;
     }
     .main-top4-bottom>ul>li>.commodityContent .pirce span{
         color: orange;
         font-size: 0.14rem;
     }
     .main-top4-bottom>ul>li>.calculate{
         width: 0.7rem;
         height: 0.16rem;
         background-color:#ffffff;
         margin-left: 0.12rem;
         margin-top: 0.54rem;
         display: flex;
         justify-content: space-evenly;
         align-items: center;
     }
     .main-top4-bottom>ul>li>.calculate button{
         width: 0.16rem;
         height: 0.16rem;
         background-color:#ffffff;
         border: none;
     }
     .main-top4-bottom>p{
         width: 100%;
         text-align:center;
         background-color:#ffffff;
     }
</style>